<head>
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;400&family=Fira+Code&display=swap" rel="stylesheet" />
  <style>
    html, body, #container {
      margin: 0;
      padding: 0;
      height: 100%;
      width: 100%;
    }
    .dark {
      color: #fff;
      background: #050505;
    }
  </style>
</head>

<body>
  <div id="container"></div>
  <style id="style"></style>
</body>

<script type="module">
import '@unocss/reset/tailwind.css'

const container = document.getElementById('container')
const style = document.getElementById('style')
const root = document.body.parentElement

if (window.parent.document.body.parentElement.className.includes('dark'))
  root.classList.toggle('dark', true)

window.addEventListener('message', ({ data }) => {
  const payload = typeof data === 'string' ? JSON.parse(data) : data
  if (payload.source !== 'unocss-playground')
    return

  container.innerHTML = payload.html
  style.innerHTML = payload.css
  root.classList.toggle('dark', payload.dark)
})
</script>
